@import './reset.css';
@import './theme.css';

html,
body {
	height: 100%;
}

body {
	cursor: var(--system-cursor-default), auto;

	font-family: var(--system-font-family);

	overflow: hidden;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

* {
	box-sizing: border-box;

	transition:
		background-color 150ms ease-in,
		background 150ms ease-in;
}

*:focus {
	outline: none;
}

*:focus-visible {
	outline: none;

	box-shadow: var(--system-focus-outline);
}

#root {
	width: 100%;
	height: 100%;

	isolation: isolate;
}

button {
	color: inherit;
	text-decoration: none;
	vertical-align: middle;
	font-family: inherit;

	border: 0;
	border-radius: 0;

	outline: 0;

	margin: 0;
	padding: 0;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	position: relative;

	user-select: none;
	appearance: none;
	cursor: var(--system-cursor-default), auto;

	background-color: transparent;

	-webkit-tap-highlight-color: transparent;
}

* {
	cursor: var(--system-cursor-default), auto;
}

/* Scrollbar Stuffs */
::-webkit-scrollbar {
	width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
	background-color: transparent;
	border-radius: 0.75rem;
	width: 5px;
	transition-duration: 0.4s;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background-color: #888;
	border-radius: 0.75rem;
	width: 5px;
	transition-duration: 0.4s;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background-color: #666;
}

/* Handle on clicked */
::-webkit-scrollbar-thumb:active {
	background-color: #444;
}
